<template>
  <div id="box">
    <div class="header">
      <div class="nav">
        <div class="layout-header">
          <i style="font-size: 25px" class="el-icon-s-fold"></i> &nbsp; 数据列表
        </div>

        <div class="main">
          <el-table :data="foodData" border style="width: 100%">
            <el-table-column
              prop="date"
              label="日期"
              width="300"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="套餐信息"
              width="300"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="address" label="操作" align="center">
              <template>
                <div>
                  <el-button type="text" @click="dialogFormVisible = true"
                    >操作</el-button
                  >
                  <div class="dialog">
                    <el-dialog
                      title="添加菜品"
                      :visible.sync="dialogFormVisible"
                      :append-to-body="bl"
                      width="30%"
                      align="center"
                    >
                      <el-form :model="form">
                        <el-form-item
                          label="*套餐A"
                          :label-width="formLabelWidth"
                        >
                          <el-input
                            v-model="form.name"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                      </el-form>
                      <el-form :model="form">
                        <el-form-item
                          label="*套餐B"
                          :label-width="formLabelWidth"
                        >
                          <el-input
                            v-model="form.name1"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                      </el-form>

                      <div slot="footer" class="dialog-footer" align="center">
                        <el-button @click="dialogFormVisible = false"
                          >取 消</el-button
                        >
                       
                        <el-button :plain="true" @click="open2">确定</el-button>
                     
                      </div>
                    </el-dialog>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="bottom" style="text-align: center">
      <p>Aoure原型设计与制作因为兴趣所以热爱</p>
      <p>We Chat: 13182887326</p>
      <p>文档末经授权禁止商业使用</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bl: true,
      dialogFormVisible: false,
      form: {
        name: "",
        name1: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      foodData: [
        {
          date: "2019-4-27",
          name: "已添加",
          address: "修改",
        },
      ],
    };
  },
  methods: {
    open2() {
      this.$message({
        showClose: true,
        message: "恭喜你，已确认",
        type: "success",
      });
    },
  },
  async mounted() {
    let ret = await this.$store.dispatch("foods/getUserList");
    this.foodData = ret.data.foodData;
  },
};
</script>

<style lang="scss" scoped>
.layout-header {
  font-size: 14px;
  height: 60px;
  line-height: 60px;
  background-color: rgba(242, 242, 242, 1);
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
  color: #999;
  padding: 0px 30px;
}
.nav {
  margin: 30px;
}
.bottom {
  padding: 80px 0px;
}
::v-deep {
  .el-dialog__header {
    padding: 20px 20px 10px;
    background-color: #ccc;
    text-align: center;
  }
  .el-dialog__body {
    text-align: center;
  }
}
</style>